<template>
    <div class="flex-container">
        <div id="contest-main">
            <!--children-->
            <transition name="fadeInUp">
                <router-view></router-view>
            </transition>
            <!--children end-->
            <div class="flex-container" v-if="route_name === 'contest-details'">
                <template>
                    <div id="contest-desc">
                        <Panel :padding="20" shadow>
                            <div slot="title">
                                {{ contest.title }}
                            </div>
                            <div slot="extra">
                                <Tag type="dot" :color="countdownColor">
                                    <span id="countdown">{{ countdown }}</span>
                                </Tag>
                            </div>
                            <div
                                v-html="contest.description"
                                class="markdown-body"
                            ></div>
                            <div
                                v-if="passwordFormVisible"
                                class="contest-password"
                            >
                                <Input
                                    v-model="contestPassword"
                                    type="password"
                                    placeholder="contest password"
                                    class="contest-password-input"
                                    @on-enter="checkPassword"
                                />
                                <Button type="info" @click="checkPassword"
                                    >Enter</Button
                                >
                            </div>
                        </Panel>
                        <Table
                            :columns="columns"
                            :data="contest_table"
                            disabled-hover
                            style="margin-bottom: 40px"
                        ></Table>
                    </div>
                </template>
            </div>
        </div>
        <div v-show="showMenu" id="contest-menu">
            <VerticalMenu @on-click="handleRoute">
                <VerticalMenu-item
                    :route="{
                        name: 'contest-details',
                        params: { contestID: contestID }
                    }"
                >
                    <i class="fa fa-home" aria-hidden="true"></i>
                    {{ $t("m.Overview") }}
                </VerticalMenu-item>

                <VerticalMenu-item
                    :disabled="contestMenuDisabled"
                    :route="{
                        name: 'contest-announcement-list',
                        params: { contestID: contestID }
                    }"
                >
                    <i class="fa fa-comments" aria-hidden="true"></i>
                    {{ $t("m.Announcements") }}
                </VerticalMenu-item>

                <VerticalMenu-item
                    :disabled="contestMenuDisabled"
                    :route="{
                        name: 'contest-problem-list',
                        params: { contestID: contestID }
                    }"
                >
                    <i class="fa fa-photos" aria-hidden="true"></i>
                    {{ $t("m.Problems") }}
                </VerticalMenu-item>

                <VerticalMenu-item
                    v-if="OIContestRealTimePermission"
                    :disabled="contestMenuDisabled"
                    :route="{ name: 'contest-submission-list' }"
                >
                    <i class="fa fa-bars" aria-hidden="true"></i>
                    {{ $t("m.Submissions") }}
                </VerticalMenu-item>

                <VerticalMenu-item
                    v-if="OIContestRealTimePermission"
                    :disabled="contestMenuDisabled"
                    :route="{
                        name: 'contest-rank',
                        params: { contestID: contestID }
                    }"
                >
                    <i class="fa fa-smile-o" aria-hidden="true"></i>
                    {{ $t("m.Rankings") }}
                </VerticalMenu-item>

                <VerticalMenu-item
                    v-if="showAdminHelper"
                    :route="{
                        name: 'acm-helper',
                        params: { contestID: contestID }
                    }"
                >
                    <i class="fa fa-paw" aria-hidden="true"></i>
                    {{ $t("m.Admin_Helper") }}
                </VerticalMenu-item>
            </VerticalMenu>
        </div>
    </div>
</template>

<script>
const moment = window.moment
import api from "@oj/api"
import { mapState, mapGetters, mapActions } from "vuex"
import { types } from "@/store"
import { CONTEST_STATUS_REVERSE, CONTEST_STATUS } from "@/utils/constants"
import time from "@/utils/time"

export default {
    name: "ContestDetail",
    components: {},
    data() {
        return {
            CONTEST_STATUS: CONTEST_STATUS,
            route_name: "",
            btnLoading: false,
            contestID: "",
            contestPassword: "",
            columns: [
                {
                    title: this.$i18n.t("m.StartAt"),
                    render: (h, params) => {
                        return h("span", time.utcToLocal(params.row.start_time))
                    }
                },
                {
                    title: this.$i18n.t("m.EndAt"),
                    render: (h, params) => {
                        return h("span", time.utcToLocal(params.row.end_time))
                    }
                },
                {
                    title: this.$i18n.t("m.ContestType"),
                    render: (h, params) => {
                        return h(
                            "span",
                            this.$i18n.t(
                                "m." + params.row.contest_type.replace(" ", "_")
                            )
                        )
                    }
                },
                {
                    title: this.$i18n.t("m.Rule"),
                    render: (h, params) => {
                        return h(
                            "span",
                            this.$i18n.t("m." + params.row.rule_type)
                        )
                    }
                },
                {
                    title: this.$i18n.t("m.Creator"),
                    render: (h, data) => {
                        return h("span", data.row.created_by.username)
                    }
                }
            ]
        }
    },
    mounted() {
        this.contestID = this.$route.params.contestID
        this.route_name = this.$route.name
        this.$store.dispatch("getContest").then(res => {
            this.changeDomTitle({ title: res.data.data.title })
            let data = res.data.data
            let endTime = moment(data.end_time)
            if (endTime.isAfter(moment(data.now))) {
                this.timer = setInterval(() => {
                    this.$store.commit(types.NOW_ADD_1S)
                }, 1000)
            }
        })
    },
    methods: {
        ...mapActions(["changeDomTitle"]),
        handleRoute(route) {
            this.$router.push(route)
        },
        checkPassword() {
            if (this.contestPassword === "") {
                this.$error("Password can't be empty")
                return
            }
            this.btnLoading = true
            api.checkContestPassword(this.contestID, this.contestPassword).then(
                res => {
                    this.$success("Succeeded")
                    this.$store.commit(types.CONTEST_ACCESS, { access: true })
                    this.btnLoading = false
                },
                res => {
                    this.btnLoading = false
                }
            )
        }
    },
    computed: {
        ...mapState({
            showMenu: state => state.contest.itemVisible.menu,
            contest: state => state.contest.contest,
            contest_table: state => [state.contest.contest],
            now: state => state.contest.now
        }),
        ...mapGetters([
            "contestMenuDisabled",
            "contestRuleType",
            "contestStatus",
            "countdown",
            "isContestAdmin",
            "OIContestRealTimePermission",
            "passwordFormVisible"
        ]),
        countdownColor() {
            if (this.contestStatus) {
                return CONTEST_STATUS_REVERSE[this.contestStatus].color
            }
            return ""
        },
        showAdminHelper() {
            return this.isContestAdmin && this.contestRuleType === "ACM"
        }
    },
    watch: {
        $route(newVal) {
            this.route_name = newVal.name
            this.contestID = newVal.params.contestID
            this.changeDomTitle({ title: this.contest.title })
        }
    },
    beforeDestroy() {
        clearInterval(this.timer)
        this.$store.commit(types.CLEAR_CONTEST)
    }
}
</script>

<style scoped lang="less">
pre {
    display: inline-block;
}

#countdown {
    font-size: 16px;
}

.flex-container {
    #contest-main {
        flex: 1 1;
        width: 0;
        #contest-desc {
            flex: auto;
        }
    }
    #contest-menu {
        flex: none;
        width: 210px;
        margin-left: 20px;
    }
    .contest-password {
        margin-top: 20px;
        margin-bottom: -10px;
        &-input {
            width: 200px;
            margin-right: 10px;
        }
    }
}
</style>
